import { ReactNode, ComponentProps } from "react";
import { cn } from "@/lib/utils";

interface InputWithIconProps extends ComponentProps<"input"> {
  startIcon?: ReactNode;
  endIcon?: ReactNode;
}

const InputWithIcon = ({
  startIcon,
  endIcon,
  className,
  ...inputProps
}: InputWithIconProps) => (
  <div className={cn(
    "h-9",
    "flex items-center w-full min-w-0 rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none",
    "border-input",
    "focus-within:border-ring",
    "focus-within:ring-1 focus-within:ring-ring/50",
    "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
    "dark:aria-invalid:ring-destructive/40",
    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
    className,
  )}>
    {startIcon && (
      <div className="flex shrink-0 items-center text-muted-foreground">
        {startIcon}
      </div>
    )}
    <input
      className={cn(
        "flex-1 border-0 bg-transparent outline-none",
        "placeholder:text-muted-foreground",
        "disabled:cursor-not-allowed disabled:opacity-50 h-full w-full",
        {
          "pl-3": !startIcon,
          "pr-3": !endIcon,
        }
      )}
      {...inputProps}
    />
    {endIcon && (
      <div className="flex shrink-0 items-center text-muted-foreground">
        {endIcon}
      </div>
    )}
  </div>
);

export default InputWithIcon;
